import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export function ChatMessage({
  content,
  role,
  timestamp,
}: {
  content: string;
  role: "user" | "assistant";
  timestamp: Date;
}) {
  const isUser = role === "user";
  
  return (
    <div
      className={cn(
        "flex w-full gap-4 p-4",
        isUser ? "justify-end" : "justify-start"
      )}
    >
      {!isUser && (
        <Avatar className="h-8 w-8 bg-blue-600 text-white">
          <AvatarFallback>AI</AvatarFallback>
        </Avatar>
      )}
      
      <div className="flex max-w-3xl flex-col gap-1">
        <div
          className={cn(
            "rounded-lg p-3",
            isUser
              ? "bg-blue-600 text-white"
              : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100"
          )}
        >
          <div className="whitespace-pre-line">{content}</div>
        </div>
        <div
          className={cn(
            "text-xs",
            isUser
              ? "text-right text-gray-500 dark:text-gray-400"
              : "text-gray-500 dark:text-gray-400"
          )}
        >
          {timestamp.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
          })}
        </div>
      </div>
      
      {isUser && (
        <Avatar className="h-8 w-8 bg-gray-300 text-gray-600">
          <AvatarFallback>U</AvatarFallback>
        </Avatar>
      )}
    </div>
  );
}

export function ChatSource({ source }: { source: { title: string; content: string } }) {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800">
      <h4 className="mb-1 font-medium text-gray-900 dark:text-white">
        {source.title}
      </h4>
      <p className="text-sm text-gray-600 dark:text-gray-300">
        {source.content}
      </p>
    </div>
  );
} 